import { useEditor } from '@craftjs/core';
import { Col, Divider, Row, Tabs } from 'antd';
import { CardInfo, ProForm, ProTable as RexProTable } from './BaseComponents';
import * as OtherComponent from './BaseComponents/BitLowCode';
import styled from "styled-components";
import { Layers } from "@craftjs/layers";
import type { TabsProps } from 'antd';
import { AppstoreOutlined, UnorderedListOutlined } from '@ant-design/icons';

const TabPanelStyle = styled.div`

  height: 100%;
 .ant-tabs-tabpane{
  padding-left: 0 !important;
 }
`;

const CelStyle = styled.div`
  line-height: 36px;
  text-align: center;
  height: 36px;
  margin: 0 8px 12px 8px;
  padding: 0 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  background: #fff;
  color: #444;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  position: relative;
  z-index: 1;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  &:hover {
    z-index: 2;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border-color: #1677ff;
    color: #1677ff;
    background: #f5f9ff;
  }

  &:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  }
`;

const LayersStyle = styled.div`
  height: 100%;
  width: 100%;
  overflow: auto;
  padding:10px 8px 0 8px;

  h2 {
    margin-bottom: 0;
  }

  .craft-layer-node {
    width: 100%;
  }
`;

const ComponentsGrid = styled.div`
  height: calc(100% - 40px);
  overflow-y: auto;
  padding: 8px;
`;

export const ToolBox = () => {
  const {
    connectors: { create },
  } = useEditor();

  const items: TabsProps['items'] = [
    {
      key: '1',
      label: <AppstoreOutlined style={{ fontSize: '18px' }} />,
      children: (
        <ComponentsGrid>
          <Row gutter={0}>
          <Col span={12}>
          <CelStyle
            ref={(dom) =>
              create(dom as HTMLElement, <CardInfo title="Card Info" />)
            }
          >
            CardInfo
          </CelStyle>
        </Col>
        <Col span={12}>
          <CelStyle
            ref={(dom) => create(dom as HTMLElement, <RexProTable />)}
          >
            ProTable
          </CelStyle>
        </Col>
        <Col span={12}>
          <CelStyle
            ref={(dom) => create(dom as HTMLElement, <ProForm />)}
          >
            ProForm
          </CelStyle>
        </Col>
        <Divider />
            {Object.values(OtherComponent)
              .sort((a, b) => (a.config.sort ?? 99) - (b.config.sort ?? 99))
              .map((item) => (
                <Col 
                  key={item.displayName} 
                  style={{display: item.config.hidden ? 'none' : ''}} 
                  span={12}
                >
                  <CelStyle
                    ref={(dom) => item.toolbox(create, dom as HTMLElement)}
                  >
                    {item.config.name || item.displayName}
                  </CelStyle>
                </Col>
              ))}
          </Row>
        </ComponentsGrid>
      ),
    },
    {
      key: '2',
      label: <UnorderedListOutlined style={{ fontSize: '18px' }} />,
      children: (
        <LayersStyle>
          <Layers />
        </LayersStyle>
      ),
    },
  ];

  return (
    <div style={{
      height: '100%',
      borderRight: '1px solid #d3d3d3',
      boxSizing: 'border-box',

    }}>
      <TabPanelStyle>

      <Tabs
        tabPosition="left"
        items={items}
        style={{ height: '100%' }}
        tabBarGutter={0}
        tabBarStyle={{
          paddingTop:'20px'
        }}
      />
      </TabPanelStyle>
    
    </div>
  );
};